<template>
  <van-popup v-model="show" position="bottom">
    <div v-show="optionShow" class="allbox" @click="optionShow = false"></div>

    <div class="box">
      <div class="btop">
        <span class="t1">{{ $t("long.tiaozhengbaozhengjin") }}</span>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="ibox">
        <div class="i1">{{ $t("common.shuliang") }}</div>
        <div class="iconer">
          <div class="botbox" v-if="optionShow">
            <div
              class="botitem"
              @click.stop="
                textVal = '增加';
                number = '';
                optionShow = false;
              "
            >
              {{ $t("common.zengjia") }}
            </div>
            <div
              class="botitem"
              @click.stop="
                textVal = '减少';
                number = '';
                optionShow = false;
              "
            >
              {{ $t("common.jianshao") }}
            </div>
          </div>
          <div class="ibox1" @click="optionShow = true">
            <div class="if1">
              {{
                textVal == "增加"
                  ? $t("common.zengjia")
                  : $t("common.jianshao")
              }}
            </div>
            <img class="iimg" src="../../../assets/images/xia.png" alt="" />
          </div>
          <van-field
            class="ibox2"
            v-model="number"
            :placeholder="$t('common.shuliang')"
            type="number"
          />
          <div class="ibox3">
            <div class="if3" @click="number = marginChangeNum">
              {{ $t("long.tip_baozhengjin3") }}
            </div>
            <div class="if4">USDT</div>
          </div>
        </div>
      </div>
      <div class="main1">
        <div class="m1-li">
          <div class="mli1">{{ $t("long.tip_baozhengjin4") }}</div>
          <div class="mli2">{{ detail.margin }} USDT</div>
        </div>
        <div class="m1-li">
          <div class="mli1">
            {{
              textVal == "增加"
                ? $t("long.tip_baozhengjin5")
                : $t("common.zuidakejianshao")
            }}
          </div>
          <div class="mli2">{{ marginChangeNum }} USDT</div>
        </div>
        <div class="m1-li">
          <div class="mli1">{{ $t("long.tip_baozhengjin6") }}</div>
          <div class="mli2">{{ strongParity }} USDT</div>
        </div>
      </div>
      <van-button
        :class="!number && 'huibtn'"
        type="info"
        class="confirm"
        @click="handleSubmit"
        >{{ $t("long.queren") }}</van-button
      >
    </div>
  </van-popup>
</template>

<script>
import { Toast } from "vant";
export default {
  props: [],
  data() {
    return {
      textVal: "增加",
      currentPositionDetail: {},
      optionShow: false,
      number: "",
      detail: {},
      show: false,
      margin: 0,
    };
  },
  watch: {
    show(val) {
      this.textVal = "增加";
      this.number = "";
    },
  },
  created() {
    // this.getMarginInfo();
  },
  computed: {
    //最大最小可变化的保证金
    marginChangeNum() {
      if (this.textVal == "增加") {
        //增加
        return this.margin;
      } else {
        //减少
        let item = this.detail;
        // max(0,持仓保证金 - 标准保证金 - abs(min(0,盈亏)))
        
       let ret = Math.max(0,(+item.margin - +item.initialMargin - Math.abs(Math.min(0,+item.floatProfit))))
       let ret2 = this.$myfixedNum(+ret * 0.9, +item.mainCurAccuracy);
        if (ret2 > 0) {
          return ret2;
        } else {
          return 0.0;
        }
      }
    },
    //调整保证金 参考强平价
    strongParity() {
      let item = this.detail;
      if (this.number) {
        let minValue = +(+item.openAvgPrice * +item.nowNum);
        let ret = 0;
        let allmargin =
          this.textVal == "增加"
            ? +item.margin + +this.number
            : +item.margin - +this.number;
        let tiqianliang =
          +this.currentPositionDetail.liquidateAdvance / 100 || 0.001;
        if (item.side == "多") {
          //开多
          ret = (1 + tiqianliang - +allmargin / minValue) * +item.openAvgPrice;
        } else {
          //开空
          ret = (1 - tiqianliang + +allmargin / minValue) * +item.openAvgPrice;
        }
        return +this.number > 0
          ? this.$myfixedNum(ret, 2)
          : item.liquidatePrice;
      } else {
        return item.liquidatePrice;
      }
    },
  },
  methods: {
    //获取页面信息2
    async getMarginInfo() {
      const ret = await this.$http({
        url: `/contract/app/symbol/detail/${this.detail.symbolId}`,
        method: "get",
        params: {},
      });
      if (ret.data.code === 0) {
        this.currentPositionDetail = ret.data.data.detailed;
      }
    },
    // 逐仓调整保证金
    async handleSubmit() {
      if (+this.number > +this.marginChangeNum) {
        Toast(this.$t("long.contracttoast6"));
        return;
      }
      if (!+this.number) {
        return;
      }
      let params = {
        amount: this.number,
        positionId: this.detail.id,
        calculationType: this.textVal == "增加" ? 0 : 1, // (0加、1减)
      };
      const ret = await this.$http({
        url: "/contract/app/position/margin/change",
        method: "post",
        data: params,
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.contracttoast7"));
        this.show = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .main1 {
    padding: 8vw 0;
    border-bottom: 1px solid #171A2B;
    .m1-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 7vw;
      .mli1 {
        font-size: 3.2vw;
        color: #8992AE;
      }
      .mli2 {
        font-size: 3.4vw;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.ibox {
  margin-top: 4vw;
  display: flex;
  flex-direction: column;
  .i1 {
    color: #8992AE;
    color: 3.2vw;
    margin-bottom: 2vw;
    text-align: left;
  }
  .iconer {
    padding: 0vw 3vw;
    display: flex;
    height: 10.6vw;
    align-items: center;
    background-color: #333540;
    position: relative;
    .ibox1 {
      display: flex;
      align-items: center;
      width: 20vw;
      justify-content: center;
      .if1 {
        font-size: 3.8vw;
        color: #fff;
        margin-right: 2vw;
      }
      .iimg {
        width: 4.8vw;
        position: relative;
        top: -3px;
      }
    }
    .ibox2 {
      padding: 0 2vw !important;
      background-color: transparent;
      border: 0 !important;
      flex: 1;
    }
    ::v-deep .van-field__control {
      color: #fff !important;
    }
    .van-cell::after {
      border: 0 !important;
    }
    .ibox3 {
      display: flex;
      align-items: center;
      .if3 {
        font-size: 3.8vw;
        color: #1989fa;
        margin-right: 2vw;
        font-weight: 600;
      }
      .if4 {
        font-size: 3.8vw;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.botbox {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #171A2B;
  border-radius: 0 0 2px 2px;
  font-size: 3.4vw;
  z-index: 200;
  .botitem {
    width: 10vw;
    padding: 3.4vw 6vw;
    text-align: center;
    color: #fff;
  }
}

.huibtn {
  background-color: #4d4e58 !important;
  border-color: #4d4e58;
  color: #8992AE !important;
}
.allbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}
</style>